<script setup>
import { ref } from 'vue'
const statusObj = {
  0: '待审批',
  1: '已通过',
  2: '已拒绝',
}

const classObj = {
  0: 'approval',
  1: 'approved',
  2: 'rejected',
}

const props = defineProps({
  title: {
    type: String,
  },
  status: {
    type: String,
  },
  labelWidth: {
    type: Number,
    default: 140,
  },
  obj: {
    type: Object,
    default: () => {},
  },
  itemList: {
    type: Array,
    default: () => [],
  },
})
</script>

<template>
  <view class="detail-card">
    <view class="header" v-if="title || status">
      <view v-if="title" class="title">{{ title }}</view>
      <view v-if="statusObj[status]" class="status" :class="classObj[status]">{{
        statusObj[status]
      }}</view>
    </view>
    <view class="list" v-for="(item, index) in itemList" :key="index">
      <view class="label" :style="{ width: labelWidth + 'rpx' }"
        >{{ item.label }}：</view
      >
      <view class="value">{{ obj[item['key']] || '-' }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.detail-card {
  margin-bottom: 28rpx;
  padding: 24rpx 36rpx;
  border-radius: 16rpx;
  background: #ffffff;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .status {
      border-radius: 6rpx;
      padding: 6rpx 12rpx;
      font-size: 24rpx;
      font-weight: 400;
    }
  }
  .list {
    margin-bottom: 14rpx;
    display: flex;
    .label {
      flex-shrink: 0;
      font-size: 28rpx;
      color: #666666;
    }
    .value {
      font-size: 28rpx;
      color: #333333;
    }
  }
}

.approved {
  background: #ebfcdc;
  color: #1eb023;
}

.rejected {
  background: #ffe6e6;
  color: #e33c64;
}

.approval {
  color: #ea5506;
  background: #fcecdc;
}
</style>
